<template>
  <div class="filter font">
    <div class="inner">
      <el-form :model="pathologyInfo" label-width="180px">
        <!--<span class="title-medium text-importent">病理信息</span>-->
        <el-row style="margin-top: 15px">
          <el-col :span="11">
            <el-form-item label="病史摘要">
              <el-input
                v-model="pathologyInfo.diagnosisHistory"
                :autosize="{ minRows: 2 }"
                placeholder="请输入病理信息"
                type="textarea"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="临床诊断">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2 }"
                placeholder="请输入临床诊断"
                v-model="pathologyInfo.diagnosisContent"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="11">
            <el-form-item label="原病理诊断">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2 }"
                placeholder="请输入原病理诊断"
                v-model="pathologyInfo.orginalPhythologyDiagnosis"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="免疫组化、分子病理结果">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2 }"
                placeholder="请输入已做免疫组化及其结果"
                v-model="pathologyInfo.resultPhythologyDiagnosis"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="11">
            <el-form-item label="大体观察巨检" prop="pathologyObserved">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2 }"
                placeholder="请输入大体观察"
                v-model="pathologyInfo.pathologyObserved"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="病史资料图片：" style="margin-top: 15px">
          <VueDraggable
            @end="onDiagnosisHistoryClick"
            draggable=".draggable-item"
            v-model="createDiagnosisDataParameters"
          >
            <div
              v-for="item in createDiagnosisDataParameters"
              :key="item.uid"
              class="draggable-item"
            >
              <div class="icon-close" @click="removeImg(item)">
                <i class="el-icon-close" style="background-color: #fff"></i>
              </div>
              <el-image
                style="width: 146px; height: 146px"
                :src="item.url"
                fit="fill"
                :preview-src-list="srcList"
              >
              </el-image>
            </div>
            <el-upload
              class="upload-img"
              :action="`${imageServiceURL}/upload`"
              :on-success="uploadImageSuccess"
              :before-upload="beforeAvatarUpload"
              multiple
              list-type="picture-card"
              :file-list="createDiagnosisDataParameters"
              :show-file-list="false"
            >
              <el-button size="small" type="primary">图片上传</el-button>
              <!-- <div slot="file" slot-scope="{ file }">
                <el-image
                  style="width: 146px; height: 146px"
                  :src="file.url"
                  fit="fill"
                  :preview-src-list="srcList"
                >
                </el-image>
              </div> -->
              <div v-if="pathReposURL && pathReposURL.length > 0">
                <el-input
                  size="mini"
                  style="width: 300px"
                  v-model="pathReposName"
                  placeholder="请输入附件名称"
                >
                </el-input>
              </div>
            </el-upload>
          </VueDraggable>
        </el-form-item>
        <div style="margin-top: 6px; text-align: center">
          <el-button type="primary" size="mini" @click="onDiagnosisHistoryClick">提交</el-button>
        </div>
        <div style="margin-top: 6px; text-align: center" v-show="ddyPerssion == true">
          <el-button type="primary" size="mini" @click="inputDiagnosisInfo"
            >整理员输入病理信息</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import VueDraggable from 'vuedraggable'
export default {
  name: 'ConsultationBiopsyView',
  components: {
    VueDraggable
  },
  props: ['orders'],
  data() {
    return {
      userName: this.$store.state.user.name,
      imageServiceURL: process.env.VUE_APP_ImageServiceURL,
      permissionGroupList: this.$store.state.permissionList, // 权限列表数据结构
      pathologyInfo: {},
      createDiagnosisDataParameters: [],
      imageUploadTip: '只能上传jpg/png/bmp文件',
      pathReposURL: '', // 病理报告
      dialogVisible: false,
      uploadImageCount: 0,
      submitting: false,
      ddyPerssion: false,
      isSendDoctor: false
    }
  },
  computed: {
    srcList() {
      return this?.createDiagnosisDataParameters?.map(n => n.url) || []
    }
  },
  mounted() {
    let _this = this
    _this.pathologyInfo =
      _this.orders?.patients[0]?.diagnosisHistory.length > 0
        ? _this.orders.patients[0].diagnosisHistory[0]
        : {}
    _this.orders.patients?.[0].diagnosisHistory[0]?.diagnosisDataInfos?.forEach(item => {
      if (item.fileType == 0) {
        _this.createDiagnosisDataParameters.push({
          url: item.fileAddress,
          fileType: 0
        })
        // _this.srcList.push(item.fileAddress)
      }
    })
    this.isSendDoctor = this.userName === _this.orders.sendingDoctor ? true : false
    this.permisson()
  },
  methods: {
    permisson() {
      this.permissionGroupList.forEach((item, index) => {
        if (item.name == '院外会诊') {
          this.permissionGroupList[index].permissionList.forEach((it, num) => {
            if (it.code == 'consultation-dispatch') {
              this.ddyPerssion = true
            }
          })
        }
      })
    },
    removeImg(img) {
      //   if (this.isSendDoctor) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.submitting) {
            this.$message.warning('还未完成提交,请稍后!')
            return false
          }
          this.createDiagnosisDataParameters = this.createDiagnosisDataParameters.filter(
            item => item.url != img.url
          )
          this.onDiagnosisHistoryClick()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      //   } else {
      //     this.$message.warning('您没有权限删除')
      //   }
    },
    inputDiagnosisInfo() {
      const { state } = this.$store
      const { href } = this.$router.resolve({
        name: 'ConsultationInputDiagnosisInfo',
        path: '/consultation//inputDiagnosisInfo',
        query: {
          authorization: this.$store.state.authorization,
          userId: state.user.id,
          patientId: this.orders.patients[0].id,
          id: this.pathologyInfo.id //病人诊断历史ID
        }
      })
      window.open(href, '_blank')
    },
    async onDiagnosisHistoryClick() {
      if (this.orders.serviceStatus == 2) {
        this.$message.warning('诊断结束,不能提交或修改数据')
        return false
      }
      if (this.submitting) {
        this.$message.warning('还未完成提交,请稍后!')
        return false
      }
      this.submitting = true
      try {
        let Data = {
          patientId: this.orders.patients[0].id,
          id: this.pathologyInfo.id, //病人诊断历史ID
          deleteFileType: 0,
          diagnosisHistory: this.pathologyInfo.diagnosisHistory, //病史摘要
          diagnosisContent: this.pathologyInfo.diagnosisContent, //临床诊断
          orginalPhythologyDiagnosis: this.pathologyInfo.orginalPhythologyDiagnosis, //原病理诊断
          resultPhythologyDiagnosis: this.pathologyInfo.resultPhythologyDiagnosis, //已做免疫组化分子检测
          pathologyObserved: this.pathologyInfo.pathologyObserved,
          createDiagnosisDataParameters: this.createDiagnosisDataParameters.map(item => {
            return { fileAddress: item.url, fileType: item.fileType }
          }) //病史资料图片
        }
        await this.$axios({
          method: 'POST',
          url: `/diagnosis_history`,
          data: Data
        }).then(res => {
          if (res && res.data.code === 200) {
            this.$message.success('已保存')
          }
        })
      } catch (e) {
        this.$message.error(e)
      } finally {
        this.submitting = false
      }
    },

    uploadImageSuccess(res, file, fileList) {
      let _this = this
      if (_this.uploadImageCount == 0) {
        _this.uploadImageCount = _this.createDiagnosisDataParameters.length
      }
      _this.uploadImageCount = _this.uploadImageCount + 1
      _this.createDiagnosisDataParameters = fileList.map(item => ({
        ...item,
        url: item?.response?.url || item.url,
        fileType: 0,
        description: ''
      }))
      if (_this.uploadImageCount == _this.createDiagnosisDataParameters.length) {
        _this.uploadImageCount = 0
        _this.onDiagnosisHistoryClick()
      }
    },
    beforeAvatarUpload(file) {
      debugger
      const isJPG =
        file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'
      if (!isJPG) {
        this.$message.error('上传图片只能是JPG、jpeg、png格式!')
      }
      return isJPG
    }
  }
}
</script>

<style scoped>
.draggable-item {
  display: inline-block;
  margin: 0 8px 8px 0;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
  position: relative;
}

.upload-img {
  display: inline-block;
  margin: 0 8px 8px 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  vertical-align: middle;
}

.font {
  color: #ffffff;
  line-height: 40px;
}

.filter {
  border-bottom: #f4f4f4 1px;

  padding: 10px 30px;

  background: #ffffff;
}

.inner {
  border-bottom: #f4f4f4 1px;

  padding: 5px 15px 15px;

  background: #f4f4f4;

  margin-top: 20px;

  font-size: 14px;
}

.header {
  margin-top: 20px;

  font-size: 14px;
}

.item {
  margin-top: 10px;
}

.image-cards {
  display: inline-block;
  padding: 0;
  margin: 10px;
  width: 146px;
  height: 146px;
  border-radius: 4px;
}

.images {
  height: 146px;
  width: 146px;
}

.image {
  height: 200px;

  width: 200px;

  margin: 15px;
}

.icon-close {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  color: #266eff;
  z-index: 1;
}
</style>
